<template >
	<div class="label">
		<label :style="labelStyle" v-if="labelName">{{labelName}}</label>
		<div class="input">
			<slot></slot>
		</div>
	</div>
</template>
<script>
export default {
	props: {
		labelName: String,
		labelWidth: [Number, String]
	},
	computed: {
		labelStyle() {
			const ret = {}
			let parent = this.$parent
			// 递归父组件，哪个组件props里有labelWidth或者属性attr里有labelWidth就取当前$parent
			while (parent && !parent.labelWidth && !parent.$attrs.labelWidth) {
				parent = parent.$parent
			}
			const parentLabelWidth = parent ? parent.labelWidth || parent.$attrs.labelWidth : null
			const labelWidth = this.labelWidth || parentLabelWidth || 60
			if (labelWidth) {
				ret.width = labelWidth * 1 + 'px'
			}
			return ret
		}
	}
}
</script>
<style lang="scss" scoped>
.label {
	display: flex;
	font-size: 14px;
	margin-bottom: 20px;
	label {
		height: 32px;
		line-height: 32px;
		padding-right: 10px;
	}
	.input {
		flex: 1;
		color: $color-text-secondary;
		line-height: 20px;
		padding-top: 6px;
		:v-deep .el-image {
			width: 100px;
			height: 100px;
			margin-right: $margin;
		}
	}
}
.label + .label {
	padding-left: 10px;
}
</style>
